<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script lang="ts" setup>
// // 基础类型： 
// // 定义了string必须要是字符串类型
// let a: string = '123';
// console.log(a);
// // 也可以用字符串
// let str1: string = `dddd${a}`;
// console.log(str1);

import { looseIndexOf } from '@vue/shared';

// // 布尔类型
// // 使用构造函数Boolean创造的对象不是布尔值
// let boolean: boolean = true
// let boolean2: boolean = Boolean(1)
// console.log(boolean2);



// // void不能赋值null
// // let u: void = null
// // console.log(u);

// // 泛型:
// // 函数泛型：
// function num(a: number, b: number): Array<number> {
//   return [a, b]
// } //数字类型
// num(1, 2)

// function str(a: string, b: string): Array<string> {
//   return [a, b]
// } //字符串类型
// str('小伟', '小美')
// // 优化：
// function Add<T>(a: T, b: T): Array<T> {
//   return [a, b]
// }
// Add<number>(1, 2)
// Add<string>('1', '2')
// // 也可以使用不同泛型的类型，只要数量上和使用数量上使用方式能对应上就可以
// function Sub<T, U>(a: T, b: U): Array<T | U> {
//   const params: Array<T | U> = [a, b]
//   return params
// }
// Sub<Boolean, number>(false, 1)


// // 枚举 
// enum Type {
//   Red,
//   Green,
//   BLue
// }


// 联合类型
// 比如手机号通常是13xxxxxx为数字类型，这时产品需要支持座机
// 所以就可以使用联合类型 //声明变量可以，声明函数也可以
let myPhone: number | string = '018-820'
console.log(myPhone);
// 错误写法   //因为联合类型只有数字和字符串没有布尔值
// let myPhone1 :number |string =true 

// 函数使用联合类型
const fn = (type: number | boolean): boolean => {
  //强制转换
  return !!type
}
let result = fn(false)
console.log(result);

// 交叉类型：多种类型的集合，联合对象将具有所联合类型的所有成员
//声明两个对象
interface Pople {
  name: string
  age: number
}
interface Woman {
  sex: number
}

// 声明接收这个对象的函数
const xiaomei = (woman: Pople & Woman): void => {
  console.log(woman);

}

// 把两个中的属性合起来，同时也可以跟多个
xiaomei({
  name: '小美',
  age: 18,
  sex: 1
})

// 类型断言 语法：值as类型或<类型>值value as string<string>value
interface A {
  run: string
}
interface B {
  build: string
}
// 使用类断言推断他传入的是A接口的值
const fn1 = (type: A | B): string => {
  return (type as A).run
}

(window as any).abc = 123 //any临时断言，any可以成为任何类型

// 类型推论
// 当声明一个变量但是没有定义类型的时候，ts会根据我们后面写的自动推论出类型
let str2 = '小美' //我们写的‘字符串’,推断出来是string类型

// 类
// 用class定义类  包含两部分：属性和方法
class Person {
  //name = '小伟'  //属性前面省略了public关键词
  //age = 18
  name: string
  constructor(name: string) {  //实例属性创造对象使用，只有new了才能看到，实例化时触发
    this.name = name
  }
  // 方法
  run(): void {
    console.log('111');
  }
}
var p = new Person('张三')
// var p = new Person()
// p.run()
// console.log(p);

</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
